【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編

はじめに

季節の変わりめで風邪をひいていませんか？僕は38度の熱で会社を休みました。ごめんなさい。

前回は「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins（関数）」「セレクタ継承」についてご紹介しました。

そこで、今回はGUIツールのScout.appに同梱されているCompassについて活用方法を紹介したいと思います。Compassは、SCSS使いなら必須の便利なフレームワークです。

Compass - CSS オーサリングフレームワークとは

Scout.appでCompassを使うには？

Scout.appを使っていればCompassをすぐに利用することができます。SCSSにCompassのインポート指定を記述するだけです。

sample.scss

任意の.scssファイルに以下のようにCompassのインポート指定を行います。簡単ですね。これだけでCompassのすべての機能を使うことができます。

@import "compass";

また、個別の機能だけ読み込むこともできます。例えば、CSS3の機能だけ利用したい場合は、以下のようにインポート指定を行います。

@import "compass/css3";

これだけで準備完了です。
それではCompassの便利な機能を紹介していきます。

リセットCSS - Reset Utilities

Compassにはブラウザのデフォルトスタイルを調整する機能があります。いくつかのMixinが用意されており、プロジェクトによって調整できるようです。
今回はベースとなる Eric Meyer's reset 2.0のリセットルールを指定できるMixinを使ってみます。

SCSS

とても簡単。1行指定するだけです。

@import "compass";

@include global-reset;

Output CSS

HTML5に関する指定もしっかり記述されています。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

CSS3 Mixins

CSS3 Mixinsを使うことで、Bender Prefix（-webkit,-moz,-o,-ms）の記述を気にすること無くCSS3を利用することができます。4種類のPrefix（-webkit,-moz,-o,-ms）を毎回書くのは本当に面倒です。

試しに、Border RadiusのMixinsを使ってみます。

SCSS

Compassをインポートし、@include でMixinを読み込みます。普通のCSSとは記述方法が変わるので少し戸惑うかもしれませんが、@includeが先頭について:;が()に置き換わったぐらいの違いです。（ものによってはもう少し記述方法が変わります。）

@import "compass";

.border_radius
{
        @include border-radius( 3px );
}

Output CSS

アウトプットされたCSSを確認してみましょう。Bender Prefix（-webkit,-moz,-o,-ms）がズラズラと書かれていますね。同じようなMixinsを自作することもできますが、Compassを使えば豊富なCSS3 Mixinsがすぐに利用できます。

.border_radius {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

Compassに用意されているCSS3 Mixinsの種類

一覧にまとめてみました。かなり多くのCSS3 Mixinが用意されています。クロスブラウザへの配慮もされていて、よりCSS3が利用しやすくなります。

名前	Mixin	説明	詳細
Appearance	@include appearance( $ap );	プラットフォームの票十的なUIの外観にする	リンク
Background Clip	@include background-clip( $clip )	背景の適用範囲を指定	リンク
Background Origin	@include background-origin( $origin );	背景の基準位置を指定	リンク
Background Size	@include background-size(　$size-1, $size-2, $size-3, ...　);	背景画像のサイズを指定する（複数指定可）	リンク
Border Radius	@include border-radius( $radius, $vertical-radius );	コーナーの角丸指定	リンク
Box	-	フレキシブルボックスに関する指定	リンク
Box Shadow	@include box-shadow( $shadow-1, $shadow-2, $shadow-3, ... );	ボックスに影を付ける指定	リンク
Box Sizing	@include box-sizing( $bs );	ボックスサイズの算出方法指定	リンク
CSS Regions	@include flow-into( $target );	あふれたコンテンツを次の要素に移す指定	リンク
CSS3 Pie	@include pie(　$base-class　);	Internet Explorerに対しCSS3を利用できるようにする指定	リンク
Columns	@include columns($width-and-count);	マルチカラムレイアウトの指定	リンク
Filter	@include filter( $filter-1, $filter-2, $filter-3, ... );	画像へのフィルターを指定	リンク
Font Face	@include font-face(　$name, $font-files, $eot, $weight, $style　);	Webフォントを利用するための指定	リンク
Hyphenation	-	単語分割、改行、折り返しなどの指定	リンク
Images	-	背景画像に関する指定	リンク、サンプル
Inline Block	@include inline-block( $alignment );	クロスブラウザなインライブロック指定	リンク
Opacity	@include opacity( $opacity );	クロスブラウザな透明度に関する指定	リンク
Shared CSS3 Utilities	@include experimental(　$property, $value, $moz, $webkit, $o, $ms, $khtml, $official　);	まだ無いCompassにないCSS3を設定	リンク
Text Shadow	@include text-shadow( $shadow-1, $shadow-2, $shadow-3, ...　);	テキストシャドウを指定	リンク
Transform	-	変形を指定	リンク
Transition	-	アニメーションを指定	リンク
User Interface	@include user-select( $select );	ユーザーインターフェイスモジュール指定	リンク

色々なCSS3 Mixinを使ってみる

Border Radius 意外のMixinも使ってみます。

SCSS

Prefixもなく認識し易いですね。

@import "compass";

.css3_mixin
{
        //box shadow - 変数を使いたい場合、一度別の変数に格納しましょう。
        @include box-shadow( 1px 0 5px #ccc, inset 1px 0 0 #fff );

        //text shadow
        @include text-shadow( 1px 1px 0 #fff );

        //background gradient
        @include background-image( linear-gradient( #fafafa, #eee ) );
}

Output CSS

SCSSとCompassを使わないとこんなCSSに。
同じ色の指定が複数あり、変更が発生した場合にけっこうな手間になります。

.css3_mixin {
  -webkit-box-shadow: 1px 0 5px #cccccc, inset 1px 0 0 white;
  -moz-box-shadow: 1px 0 5px #cccccc, inset 1px 0 0 white;
  box-shadow: 1px 0 5px #cccccc, inset 1px 0 0 white;
  text-shadow: 1px 1px 0 white;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #eeeeee));
  background-image: -webkit-linear-gradient(#fafafa, #eeeeee);
  background-image: -moz-linear-gradient(#fafafa, #eeeeee);
  background-image: -o-linear-gradient(#fafafa, #eeeeee);
  background-image: linear-gradient(#fafafa, #eeeeee);
}

CSSの記述を効率化する各種ヘルパー

リセットCSS、CSS3 Mixinsの他にCSSの記述を効率化できるヘルパーが用意されています。
特に「Color Helper」「Image Dimension Helpers」「CSS Sprite Helpers」「Inline Data Helpers」など、CSSの記述を大幅に効率化してくれます。
（今回は細かい使い方に関する説明は省きます）

機能	説明	詳細
Color Stops Helper	グラデーション指定	リンク
Color Helper	色関連、明度、乗算など	リンク
Constant Helpers	ポジションに関するアウトプット	リンク
Cross Browser Helpers	Prefix	リンク
Display Helpers	displayプロパティ操作用関数	リンク
Font Files Helper	Font Face Mixinで利用	リンク
Image Dimension Helpers	プロジェクトの画像ディレクトリを元に画像の横幅、縦幅を返す	リンク
Inline Data Helpers	画像やフォントファイルをCSSに直接埋め込みます	リンク
Math Helpers	数学関数	リンク
Selector Helpers	複雑なネストされたセレクタの操作	リンク
CSS Sprite Helpers	画像をマージし、背景画像のポジションを自動設定するCSS　Sprite機能	リンク
URL Helpers	パス指定の共通化や環境に合わせたパス指定を可能にする	リンク

まとめ

この他にレイアウトに関する機能「Grid Backgrounds」「Sticky Footer」「Stretching」、タイポグラフィに関する機能「Links」「Lists」「Text」「Vertical Rhythm」がありますが、追って紹介していきたいと思います。

今回紹介した「リセットCSS」「CSS3 Mixins」「CSSの記述を効率化する各種ヘルパー」はすぐに利用できるものばかりで効率化に繋がります。ぜひCompassも使ってみてください。

次回はSCSSの解説に戻り、SCSSの構造設計について紹介したいと思います。